<template>
    <fieldset>
        <legend>插槽</legend>
        <input type="text"> <button>点击</button>
        <div class="header" >header
            <!-- 要写在slot标签内 -->
            <slot name="headers" :f="fruit"></slot>
        </div>
        <div class="main">main
            <slot name="mains"></slot>
        </div>
        <div class="footer">footer
            <slot name="footers"></slot>
        </div>
        <!-- 可以接收所有的 app 组件内 chacao标签中未被接收的默认分发 -->
         <slot :baby="obj"></slot>
    </fieldset>
</template>

<script>
    export default {
        data(){
            return {
                fruit:"香蕉🍌",
                obj:{
                    name:"海绵宝宝",
                    friend:"派大星",
                    boss:"谢阿金"
                }
            }
        }
    }
</script>

<style scoped>
.header {
    background-color: red;
}
.main {
    background-color: yellow;

}
.footer {
    background-color: green ;
}

div {
    font-size: 18px;
    font-weight: 700;
    /* color: #fff; */
}

</style>